<template>
  <div class="flex flex-col h-full">
    <vxe-card title="" class="w-full" :border="false">
      <div class="flex items-center">
        <div class="border-arrow" @click="toPrevPage">
          <FontIcon icon="icon-left" />
        </div>
        <div class="text-[#242930] ml-4">{{ route.query?.versionName }}</div>
        <div class="text-[#9FA6B0] ml-4">{{ route.query?.note }}</div>
      </div>
    </vxe-card>

    <vxe-card title="" class="w-full mt-4" :border="false">
      <AuForm ref="formRef" :formList="formList" @submit="search" />
    </vxe-card>

    <div class="flex-grow overflow-hidden mt-4">
      <AuTable ref="tableRef" v-bind="gridOption" @actionClick="actionClick">
        <template #status_default="{ row }">
          <el-tag :type="row.formulaStatus === 1 ? 'success' : 'info'"
            >{{ row.formulaStatus === 1 ? "上架" : "下架" }}
          </el-tag>
        </template>
        <template #tag_default="{ row }">
          <el-tag type="primary">{{ row.formulaTag }}</el-tag>
        </template>
      </AuTable>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from "vue";
import { AuTable } from "@/components/AuTable";
import { AuForm } from "@/components/AuForm";
import {
  ACTION_TYPE,
  ObjectProps,
  PropDefines
} from "@/components/AuTable/type";
import { useRouter, useRoute, onBeforeRouteLeave } from "vue-router";
import { useGlobal } from "@pureadmin/utils";
import { emitter } from "@/utils/mitt";
import { BaseProps } from "@/components/AuForm/type";
import { getMaterialList, MaterialList } from "@/api/expiry/expiry";

defineOptions({
  name: "expiryMaterialList"
});

// region 声明ref变量集合
const { $storage } = useGlobal<GlobalPropertiesApi>();
const router = useRouter();
const route = useRoute();

const formList = ref<BaseProps[]>([
  {
    type: "date",
    key: "publishTime",
    label: "上架时间",
    inType: "daterange"
  },
  {
    type: "select",
    label: "配方状态",
    key: "formulaStatus",
    placeholder: "请选择配方状态",
    valueKey: "value",
    labelKey: "label",
    options: [
      {
        label: "全部",
        value: ""
      },
      {
        label: "下架",
        value: 0
      },
      {
        label: "上架",
        value: 1
      }
    ]
  },
  {
    type: "select",
    label: "配方标签",
    key: "formulaTag",
    placeholder: "请选择配方标签",
    valueKey: "value",
    labelKey: "label",
    options: []
  },
  {
    type: "input",
    label: "配方ID",
    key: "formulaId",
    placeholder: "请输入配方ID"
  },
  {
    type: "input",
    label: "配方名称",
    key: "formulaName",
    placeholder: "请输入配方名称"
  }
]);
const gridOption = reactive<PropDefines>({
  isServerPage: true,
  showCheckbox: true,
  showIndex: false,
  columns: [
    { field: "formulaId", title: "配方ID" },
    { field: "formulaImg", title: "配方主图" },
    { field: "formulaName", title: "配方名称" },
    {
      field: "formulaTag",
      title: "配方标签",
      slots: { default: "tag_default" }
    },
    {
      field: "formulaStatus",
      title: "配方状态",
      slots: { default: "status_default" }
    },
    { field: "note", title: "备注" },
    { field: "publishTime", title: "上架时间" }
  ],
  actions: [
    ACTION_TYPE.VIEW,
    ACTION_TYPE.EDIT,
    ACTION_TYPE.PUTAWAY,
    ACTION_TYPE.OFFSHELVE,
    ACTION_TYPE.TADD,
    ACTION_TYPE.TDELETE
  ],
  topTools: [
    {
      key: "multiPubList",
      name: "批量上架",
      plain: true,
      seq: 2
    },
    {
      key: "multiOffList",
      name: "批量下架",
      plain: true,
      seq: 3
    }
  ],
  dataSource: [],
  fetchConfig: {
    query: {
      service: (params: ObjectProps) => {
        return getMaterialList(params);
      },
      param: () => formRef.value.getFormData()
    }
  }
});

const formRef = ref();
const tableRef = ref();
// endregion

// region 公共方法的集合
function storageConfigureChange<T>(key: string, val: T): void {
  const storageConfigure = $storage.configure;
  storageConfigure[key] = val;
  $storage.configure = storageConfigure;
}

// endregion

// region 组件事件的集合
const search = () => {
  tableRef.value.refresh();
};

const toPrevPage = () => {
  router.go(-1);
};

type ActionType = {
  key: ACTION_TYPE;
  row: MaterialList;
};
const actionClick = ({ key, row }: ActionType) => {
  switch (key) {
    case ACTION_TYPE.VIEW:
      router.push({
        path: "/expiry/materialDetail",
        query: {
          formulaId: row.formulaId,
          formulaName: row.formulaName,
          note: row.note
        }
      });
      break;
    case ACTION_TYPE.PUTAWAY:
      console.log("上架");
      break;
    case ACTION_TYPE.OFFSHELVE:
      console.log("下架");
      break;
    default:
      break;
  }
};
// endregion

onMounted(() => {
  storageConfigureChange("hideTabs", true);
  emitter.emit("tagViewsChange", true as unknown as string);
});

onBeforeRouteLeave((to, from, next) => {
  if (to.path !== "/expiry/materialDetail") {
    storageConfigureChange("hideTabs", false);
    emitter.emit("tagViewsChange", false as unknown as string);
  }
  next();
});
</script>
